<template>
    <div :title="title">
        <div class="connection-name">{{title}}</div>
        <div class="icons">
            <i class="el-icon-refresh icon" :class="{'disable':disableRefresh}" @click.stop="refreshKeyList()"></i>
            <i class="el-icon-edit-outline icon" :class="{'disable':disableRefresh}" @click.stop="editConnection()"></i>
            <i class="el-icon-delete icon" @click.stop="delConnection()"></i>
        </div>
        <addConnectionDialog :visible="addConnectionDialogVisible" :connection="connectionConfig" @updateVisible="addConnectionDialogVisible=false"></addConnectionDialog>
    </div>
</template>

<script>
import addConnectionDialog from '@/components/dialog/addConnectionDialog'
import localStoreCache from '@/util/cache/localStoreCache'

export default {
    components:{
        addConnectionDialog
    },
    props:["title","config"],
    data(){
        return {
            disableRefresh:true,
            addConnectionDialogVisible:false,
            connectionConfig:JSON.parse(JSON.stringify(this.$parent.$parent.$parent.connection))
        }
    },
    methods:{
        //刷新key列表
        refreshKeyList(){
            if(!this.disableRefresh){
                this.$parent.$parent.$parent.$refs.menuOperating.searchTxt=""
                this.$parent.$parent.$parent.$refs.menuKeyList.search('*')
            }
        },
        //编辑连接
        editConnection(){
            if(!this.disableRefresh){
                this.$confirm(this.$t("aside.editConnectionTips"), this.$t("aside.tips"), {
                    confirmButtonText: this.$t('aside.determine'),
                    cancelButtonText: this.$t('aside.cancel'),
                    cancelButtonClass: "btn-custom-cancel",
                    type: 'warning'
                }).then(()=>{
                    //关闭所有此服务器相关的连接
                    this.$eventBus.$emit('reServerTabName',this.$parent.$parent.$parent.clientObject)
                    //收起菜单
                    this.$parent.$parent.$parent.$refs.menu.close("1")
                    //打开编辑栏
                    this.addConnectionDialogVisible=true
                    //断开连接
                    this.$parent.$parent.$parent.clientObject=null
                }).catch(()=>{})
            }
        },
        //删除连接
        delConnection(){
            this.$confirm(this.$t("aside.delConnectionTips"),this.$t("aside.tips"),{
                confirmButtonText: this.$t('aside.determine'),
                cancelButtonText: this.$t('aside.cancel'),
                cancelButtonClass: "btn-custom-cancel",
                type: 'warning'
            }).then(()=>{
                const isok=localStoreCache.delConnection(this.connectionConfig.name)
                if(isok){
                    this.$store.commit('updateConnections')
                    const tabName=this.config.name
                    this.$eventBus.$emit('reServerTabName',this.$parent.$parent.$parent.clientObject)
                }
            }).catch(()=>{})
        }
    }
}
</script>

<style scoped>
     .connection-name{
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
        font-size: 1.04em;
        display: inline-block;
        width: 170px;
    }
    .icons{
        position: absolute;
        right: 35px;
        top: -2px;
        display: inline-block;
    }
    .icons .icon {
        font-size: 12px;
        margin:0px;
        width: auto;
        padding: 0px 2px;
    }
    .icons .icon:hover {
        background: #dcdee0;
        border-radius: 3px;
    }
    .disable{
        cursor:not-allowed;
    }
</style>